<template>
  <div class="example-container">
    <h2>LoadingNodata 组件使用示例</h2>
    
    <div class="example-section">
      <h3>基本用法</h3>
      <LoadingNodata :loading="loading" :data="dataList">
        <div class="data-list">
          <div v-for="(item, index) in dataList" :key="index" class="data-item">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-desc">{{ item.description }}</div>
          </div>
        </div>
      </LoadingNodata>
      
      <div class="control-buttons">
        <el-button type="primary" @click="fetchData">重新加载</el-button>
        <el-button @click="setEmptyData">设为空数据</el-button>
        <el-button @click="setLoadingState">切换加载状态</el-button>
      </div>
    </div>
    
    <div class="example-section">
      <h3>自定义文本</h3>
      <LoadingNodata 
        :loading="customLoading" 
        :data="customData"
        loading-text="正在努力加载中，请耐心等待..."
        empty-text="没有找到您要的数据，请尝试其他条件"
      >
        <div class="data-list">
          <div v-for="(item, index) in customData" :key="index" class="data-item">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-desc">{{ item.description }}</div>
          </div>
        </div>
      </LoadingNodata>
      
      <div class="control-buttons">
        <el-button type="primary" @click="fetchCustomData">重新加载</el-button>
        <el-button @click="setCustomEmptyData">设为空数据</el-button>
        <el-button @click="setCustomLoadingState">切换加载状态</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LoadingNodata from './index.vue';

// 基本示例数据
const loading = ref(true);
const dataList = ref([]);

// 模拟API请求获取数据
const fetchData = () => {
  loading.value = true;
  
  // 模拟异步请求
  setTimeout(() => {
    dataList.value = [
      { title: '标题1', description: '这是第一条数据的描述' },
      { title: '标题2', description: '这是第二条数据的描述' },
      { title: '标题3', description: '这是第三条数据的描述' },
      { title: '标题4', description: '这是第四条数据的描述' },
    ];
    loading.value = false;
  }, 1500);
};

// 设置为空数据
const setEmptyData = () => {
  dataList.value = [];
  loading.value = false;
};

// 切换加载状态
const setLoadingState = () => {
  loading.value = !loading.value;
};

// 自定义示例数据
const customLoading = ref(true);
const customData = ref([]);

// 模拟API请求获取自定义数据
const fetchCustomData = () => {
  customLoading.value = true;
  
  // 模拟异步请求
  setTimeout(() => {
    customData.value = [
      { title: '自定义标题1', description: '这是自定义的第一条数据' },
      { title: '自定义标题2', description: '这是自定义的第二条数据' },
    ];
    customLoading.value = false;
  }, 1500);
};

// 设置为空数据
const setCustomEmptyData = () => {
  customData.value = [];
  customLoading.value = false;
};

// 切换加载状态
const setCustomLoadingState = () => {
  customLoading.value = !customLoading.value;
};

// 初始化数据
fetchData();
fetchCustomData();
</script>

<style scoped lang="scss">
.example-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.example-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.data-list {
  margin-top: 10px;
}

.data-item {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-title {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .item-desc {
    color: #606266;
    font-size: 14px;
  }
}

.control-buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
</style> 